*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #D980FA;
}
ul{
    margin: 300px auto;
    width: 50%;
}
ul li{
    list-style: none;
    float: left;
    text-align: center;
    width: 25%;
}
ul li a{
    color: #fff;
    text-decoration: none;
}
ul li a .fa{
    font-size: 4rem;
    transition: .5s;
}
ul li a .text{
    opacity: 0;
    transition: .5s;
    transform: translateY(20px);
}
ul li:hover .fa{
    transform: translateY(-20px) scale(.5);
}
ul li:hover .text{
    transform: translateY(-20px);
    opacity: 1;
}

